<div [@routerTransition]>
  <div class="m-subheader ">
    <div class="d-flex align-items-center">
      <div class="mr-auto col-xs-6">
        <h3 class="m-subheader__title m-subheader__title--separator"><span>入库管理</span></h3>
        <span class="m-section__sub"> 入库管理的文本头信息 </span>
      </div>
      <div class="col-xs-6 text-right">
        <div class="btn-group">
          <button
            type="button"
            class="btn btn-outline-success dropdown-toggle"
            style="margin-right: 10px;"
            data-toggle="dropdown"
            aria-haspopup="true"
            aria-expanded="false"
          >
            <i class="fa fa-file-excel-o"></i>Excel操作
          </button>
          <div class="dropdown-menu">
            <!-- 在 onlyLink 为 true 时， btnColor 将不再起作用 -->
            <excel-import
              [showIcon]="false"
              [onlyLink]="true"
              [btnColor]="'success'"
              [btnText]="'导入'"
              (onUpload)="onUpload($event)"
            ></excel-import>
            <!--
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="javascript:;" (click)="exportToExcel(true)">导出模板</a>
              <a class="dropdown-item" href="javascript:;" (click)="exportToExcel(false)">导出所有数据</a>
            -->
          </div>
        </div>
        <!--
          <button *ngIf="isGranted('Pages.Administration.Languages.Create')" (click)="createOrEditLanguageModal.show()" class="btn btn-primary blue"><i class="fa fa-plus"></i> {{l("CreateNewLanguage")}}</button>
        -->
      </div>
    </div>
  </div>

  <div class="m-content">
    <div class="m-portlet m-portlet--mobile">
      <div class="m-portlet__body">
        <div class="row">
          <div class="col-md-6">
            <div class="form-group m-form__group align-items-center">
              <div class="input-group">
                <input
                  [(ngModel)]="hgzNo"
                  name="hgzNo"
                  autofocus
                  class="form-control m-input"
                  placeholder="合格证号"
                  type="text"
                  (keyup)="$event.which === 13 ? scanBillByHgzNo() : 0"
                />
                <span class="input-group-btn">
                  <button (click)="scanBillByHgzNo()" class="btn btn-primary" type="submit">
                    <i class="fa fa-crosshairs"></i>扫描
                  </button>
                </span>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="m-input-icon m-input-icon--right float-right" style="max-width: 500px;">
              <input
                type="text"
                [(ngModel)]="filterText"
                name="filterText"
                class="form-control m-input m-input--solid"
                placeholder="Search..."
                (keyup)="$event.which === 13 ? getBills() : 0"
              />
              <span class="m-input-icon__icon m-input-icon__icon--right">
                <span> <i class="la la-search m--font-brand"></i> </span>
              </span>
            </div>
            <button (click)="createOrEditWlModal.show()" class="btn btn-success">
              <i class="fa fa-plus"></i>添加物流单
            </button>
          </div>
        </div>
        <div class="row align-items-center" style="margin: 0;">
          <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
            <div class="bills row">
              <div class="bill-item" *ngFor="let bill of bills">
                <div class="m-portlet m-portlet--creative m-portlet--bordered-semi" style="background-color: #efefef;;">
                  <div class="m-portlet__head" style="height: 0;">
                    <div class="m-portlet__head-caption">
                      <div class="m-portlet__head-title">
                        <h2
                          class="m-portlet__head-label m-portlet__head-label--warning"
                          style="border-radius: 50px; background-color: #f5cf81;width: 225px;"
                        >
                          <span> {{ bill.hgzNo }} </span>
                        </h2>
                      </div>
                    </div>
                  </div>
                  <div class="m-portlet__body">
                    <h5 class="text-center">{{ bill.materialName }}({{ bill.jcCc }})</h5>
                    <p class="text-center">{{ bill.remark }}</p>
                    <div class="mt-stats">
                      <div class="row" style="height:30px;">
                        <div class="col-md-6 text-center m--font-danger" style="padding: 0;">
                          <i class="fa fa-clock-o"></i>{{ bill.scanTime | momentFormat: 'YYYY-MM-DD' }}
                        </div>
                        <div class="col-md-6 text-center m--font-accent">
                          <i class="fa fa-cubes"></i>{{ bill.scanQty }}件
                        </div>
                      </div>
                      <div class="row" style="height:30px;">
                        <div class="col-md-6 text-center m--font-danger">
                          <i class="fa fa-balance-scale"></i>{{ bill.realNum }}&nbsp;{{ bill.invMeasName }}
                        </div>
                        <div class="col-md-6 text-center m--font-accent" style="padding: 0;">
                          <i class="fa fa-cny"></i>{{ bill.totalPrice }} &nbsp;元
                        </div>
                      </div>
                    </div>
                    <div class="mt-stats text-center" style="margin-top: 15px;">
                      <div class="btn-group btn-group btn-group-justified">
                        <button class="btn m-btn--pill m-btn--air btn-success" (click)="putIntoModal.show(bill)">
                          入库
                        </button>
                        <button
                          class="btn m-btn--pill m-btn--air btn-success"
                          (click)="createOrEditWlModal.show(bill.id)"
                        >
                          编辑
                        </button>
                        <button class="btn m-btn--pill m-btn--air btn-success" (click)="deleteWl(bill)">删除</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="primeng-paging-container">
              <p-paginator
                rows="12"
                #paginator
                (onPageChange)="getBills($event)"
                [totalRecords]="primengTableHelper.totalRecordsCount"
                [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage"
              >
              </p-paginator>
              <span class="total-records-count"> {{ '总计:' + primengTableHelper.totalRecordsCount }} </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <putIntoModal #putIntoModal (modalSave)="getBills()"></putIntoModal>
  <createOrEditWlModal #createOrEditWlModal (modalSave)="getBills()"></createOrEditWlModal>
</div>
